import React, {Component} from 'react';
import {View, StyleSheet, Alert, ScrollView} from 'react-native';
import {
  Colors,
  Text,
  FloatingButton,
  FloatingButtonLayouts,
} from 'react-native-ui-lib';
import {renderBooleanOption} from '../ExampleScreenPresenter';
import {TestCase, TestSuite} from '@rnoh/testerino';

interface State {
  showButton: boolean;
  showSecondary: boolean;
  showVertical: boolean;
  fullWidth: boolean;
  hideBackgroundOverlay: boolean;
  withoutAnimation: boolean;
  addBottomMargin: boolean;
  slowAnimation: boolean;
  customButtonStyles: boolean; 
}

export default class FloatingButtonScreen extends Component<{}, State> {
  state = {
    showButton: true,
    showSecondary: true,
    showVertical: true,
    fullWidth: false,
    hideBackgroundOverlay: false, 
    withoutAnimation: false,      
    addBottomMargin: false,       
    slowAnimation: false,         
    customButtonStyles: false, 
  };

  notNow = () => {
    console.log('Secondary button pressed');
    Alert.alert('Secondary Action'); 
  };

  close = () => {
    Alert.alert('Main Action Closed.');
    this.setState({showButton: false});
  };

  render() {
    const {
      showSecondary, 
      showVertical, 
      fullWidth, 
      hideBackgroundOverlay, 
      withoutAnimation, 
      addBottomMargin,
      slowAnimation,
      customButtonStyles
    } = this.state;

    const customMainButtonProps = {
      backgroundColor: Colors.purple30, // 紫色背景
      borderRadius: 0,                  // 直角按钮
      labelStyle: { fontWeight: '900', fontStyle: 'italic' },
      label: 'Submit (Custom)'
    };

    const customSecondaryButtonProps = {
      outline: true,                    // 轮廓模式
      outlineColor: Colors.red30,       // 红色轮廓
      color: Colors.red30,              // 红色文字
      backgroundColor: 'transparent',
      label: 'Reject (Custom)'
    };

    const defaultMainButtonProps = {
      label: 'Approve',
    };

    const defaultSecondaryButtonProps = {
      label: 'Not now',
      link: true, 
      color: Colors.blue30
    };

    return (
      <TestSuite name="FloatingButton">
        <TestCase itShould="FloatingButton 属性全覆盖演示">
          <View padding-20>
            <View style={styles.container}>
              <Text text60 center $textDefault marginB-s4>
                Floating Button 配置
              </Text>
              {renderBooleanOption.call(this, 'Show Floating Button (显示/隐藏)', 'showButton')}
              {renderBooleanOption.call(this, 'Full Width Button (全宽)', 'fullWidth')}
              {renderBooleanOption.call(this, 'Show Secondary Button (显示辅助按钮)', 'showSecondary')}
              {renderBooleanOption.call(this, 'Button Layout Vertical (垂直布局)', 'showVertical')}
              {renderBooleanOption.call(this, 'Custom Button Styles (切换按钮样式)', 'customButtonStyles')}
              {renderBooleanOption.call(this, 'Hide Background Overlay (隐藏背景遮罩)', 'hideBackgroundOverlay')}
              {renderBooleanOption.call(this, 'Without Animation (禁用动画)', 'withoutAnimation')}
              {renderBooleanOption.call(this, 'Add Bottom Margin (增加底部边距 80)', 'addBottomMargin')}
              {renderBooleanOption.call(this, 'Slow Animation (慢速动画 1500ms)', 'slowAnimation')}

              <ScrollView showsVerticalScrollIndicator={false}>
                <View paddingT-20>
                  <Text text70 $textDefault style={{fontWeight: 'bold'}}>
                    Scroll behind a FloatingButton
                  </Text>
                  <Text text80 $textDefault marginT-10 style={{lineHeight: 24}}>
                    请尝试切换上方的开关来观察 FloatingButton 的不同状态：
                    {'\n'}1. 切换 "Hide Background Overlay" 观察背景是否变暗。
                    {'\n'}2. 切换 "Add Bottom Margin" 观察按钮位置上移。
                    {'\n'}3. 关闭再打开 "Show Floating Button" 配合 "Slow Animation" 观察动画速度。
                   </Text>
                  <View /> 
                </View>
              </ScrollView>

              <FloatingButton
                visible={this.state.showButton}
                fullWidth={fullWidth}
                
                button={{
                  onPress: this.close,
                  testID: 'floating_button_main',
                  ...(customButtonStyles ? customMainButtonProps : defaultMainButtonProps)
                }}
                
                secondaryButton={
                  showSecondary
                    ? {
                        onPress: this.notNow,
                        testID: 'floating_button_secondary',
                        ...(customButtonStyles ? customSecondaryButtonProps : defaultSecondaryButtonProps)
                      }
                    : undefined
                }
                
                buttonLayout={
                  showVertical
                    ? FloatingButtonLayouts.VERTICAL
                    : FloatingButtonLayouts.HORIZONTAL
                }
                
                bottomMargin={addBottomMargin ? 80 : 0}
                hideBackgroundOverlay={hideBackgroundOverlay}
                withoutAnimation={withoutAnimation}
                duration={slowAnimation ? 1500 : 300}
                testID="floating_button_container"
              />
            </View>
          </View>
        </TestCase>
      </TestSuite>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    padding: 30,
    paddingBottom: 0,
    flex: 1,
    backgroundColor: Colors.$backgroundDefault,
  },
  separator: {
    height: 1,
    backgroundColor: Colors.grey60,
    marginVertical: 10,
  }
});